<template>
  <div>
    <h1 style="font-size: 28px">设备详情</h1>
    <div>
      <a-form :label-col="{ span: 4 }" :wrapper-col="{ span: 14 }">
        <a-form-item label="设备ID">
          <a-input :value="id" disabled/>
        </a-form-item>
        <a-form-item label="MAC地址">
          <a-input :value="mac_address" disabled/>
        </a-form-item>
        <a-form-item label="注册网关ID">
          <a-input :value="gateway_id" disabled/>
        </a-form-item>
        <a-form-item label="站点ID">
          <a-input :value="site_id" disabled/>
        </a-form-item>
        <a-form-item label="设备编号">
          <a-input :value="device_no" disabled/>
        </a-form-item>
        <a-form-item label="最新温度">
          <a-input :value="temperature_value" disabled/>
        </a-form-item>
        <a-form-item label="最新电量">
          <a-input :value="power" disabled/>
        </a-form-item>
        <a-form-item label="状态码">
          <a-input :style="state == 0 ? 'color: black':'color: red'" :value="state" disabled/>
        </a-form-item>
        <a-form-item label="温度状态">
          <a-input :style="temperature_state == '正常' ? 'color: black':'color: red'" :value="temperature_state" disabled/>
        </a-form-item>
        <a-form-item label="防拆状态">
          <a-input :style="tamper_state == '正常' ? 'color: black':'color: red'" :value="tamper_state" disabled/>
        </a-form-item>
        <a-form-item label="温度校准状态">
          <a-input :style="correct_state == '正常' ? 'color: black':'color: red'" :value="correct_state" disabled/>
        </a-form-item>
        <a-form-item label="报警码">
          <a-input :style="warn_code == 0 ? 'color: black':'color: red'" :value="warn_code" disabled/>
        </a-form-item>
        <a-form-item label="报警状态">
          <a-input :style="warn_code == 0 ? 'color: black':'color: red'" :value="warn_desc" disabled/>
        </a-form-item>
        <a-form-item label="创建人">
          <a-input :value="creator_name" disabled/>
        </a-form-item>
        <a-form-item label="更新人">
          <a-input :value="updater_name" disabled/>
        </a-form-item>
        <a-form-item label="安装时间">
          <a-input :value="create_time" disabled/>
        </a-form-item>
        <a-form-item label="更新时间">
          <a-input :value="update_time" disabled/>
        </a-form-item>
        <a-form-item label="累计时长">
          <a-input :value="total_time" disabled/>
        </a-form-item>
        <a-form-item label="描述">
          <a-textarea :value="intro" disabled/>
        </a-form-item>
        <a-form-item :wrapper-col="{ span: 14, offset: 4 }">
          <a-button style="width: 140px;" @click="onBack">返回</a-button>
        </a-form-item>
      </a-form>
    </div>
  </div>
</template>

<script lang="ts">

import {defineComponent, reactive, toRefs} from "vue";
import {onMounted} from "@vue/runtime-core";
import {getDevById} from "/@/api/product/device";
import {HttpResult} from "/@/api/core/model/coreModel";
import {CoreUtils} from "/@/utils/coreUtils";

export default defineComponent({
  name: 'DeviceDetail',
  props: {
    item: {
      type: Object,
      default: null,
    },
    viewType: {
      type: String,
      default: null,
    }
  },
  setup(props, {emit}) {
    const data = reactive({
      id: props.item.id,
      device_no: props.item.device_no,
      site_id: props.item.site_id,
      mac_address: props.item.mac_address,
      gateway_id: props.item.gateway_id,
      intro: props.item.intro,
      creator_name: props.item.creator_name,
      updater_name: props.item.updater_name,
      create_time: props.item.create_time,
      update_time: props.item.update_time,
      temperature: "",
      temperature_value: "",
      power: "",
      state: "",
      temperature_state: "",
      tamper_state: "",
      correct_state: "",
      warn_code: "",
      warn_desc: "",
      total_time: "",
    });

    const onBack = () => {
      emit("my-emit", 'Cancel');
    }

    onMounted(() => {
      getDevById({
        id: data.id
      }).then((result: HttpResult) => {
        if (result.code == 0) {
          data.device_no = result.data.device_no;
          data.site_id = result.data.site_id;
          data.mac_address = result.data.mac_address;
          data.intro = result.data.intro;
          data.creator_name = result.data.creator_name;
          data.updater_name = result.data.updater_name;
          data.create_time = result.data.create_time;
          data.update_time = result.data.update_time;
          data.temperature = result.data.temperature;
          data.temperature_value = result.data.temperature_value + "℃";
          data.power = result.data.power + "%";
          data.state = result.data.state;
          data.temperature_state = result.data.temperature_state == 0 ? "正常":"异常";
          data.tamper_state = result.data.tamper_state == 0 ? "正常":"异常";
          data.correct_state = result.data.correct_state == 0 ? "正常":"异常";
          data.warn_code = result.data.warn_code;
          data.warn_desc = result.data.warn_desc;
          data.total_time = CoreUtils.getDuration(result.data.total_time);
        }
      });
    });

    return {
      ...toRefs(data),
      onBack
    };
  }
});

</script>

<style scoped>

</style>
